<template>
  <div class="management">
     <el-card>
        <div slot="header" class="list_title">
          <h4>公共列表</h4>
          <el-button size="medium" round @click="addNew" style="color: blue;">添加新人</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>

          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleitem('edit',scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="handleitem('del',scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>  
        <div class="pagination">
          <pagination  :total="params.total" :page="params.page" :limit="params.limit" @pagination="handleSizeChange"  />
        </div>    
      </el-card>

      <!-- 新增  修改 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="centerDialogVisible"
        width="40%"
        class="editdialog"
        center>
        
        <el-row :gutter="18">
          <el-col :span="8">
              <div class="sub-title">员工姓名</div>
              <el-input v-model="messageInfo.name" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="8">
             <div class="sub-title">员工性别</div>
             <el-select v-model="messageInfo.sex" placeholder="性别">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span="8">
             <div class="sub-title">岗位</div>
             <el-select v-model="messageInfo.abc" >
                <el-option
                  v-for="item in jobsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
        </el-row>

        <el-row :gutter="18">
          <el-col :span="8">
              <div class="sub-title">员工类型</div>
              <el-select v-model="messageInfo.type" placeholder="员工类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span="8">
             <div class="sub-title">入职时间</div>
              <el-date-picker
                v-model="messageInfo.startTime"
                type="date"
                placeholder="选择日期"
                default-value="2020-6-21">
              </el-date-picker>
          </el-col>
          <el-col :span="8">
             <div class="sub-title">转正时间</div>
             <el-date-picker
                v-model="messageInfo.positiveTime"
                type="date"
                placeholder="选择日期"
                default-value="2020-6-21">
              </el-date-picker>
          </el-col>
        </el-row>

        <el-row :gutter="18">
          <el-col :span="8">
              <div class="sub-title">联系电话</div>
              <el-input v-model="messageInfo.phone" placeholder="请输入内容"></el-input>
          </el-col>
         <el-col :span="8">
              <div class="sub-title">邮箱</div>
              <el-input v-model="messageInfo.phone" placeholder="请输入邮箱"></el-input>
          </el-col>
          <el-col :span="8">
             <div class="sub-title">权限</div>
              <el-select v-model="messageInfo.perm" placeholder="权限">
                <el-option
                  v-for="item in permissions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
        </el-row>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="agreeOption">确 定</el-button>
        </span>
      </el-dialog>

  </div>
</template>

<script>
// import DropdownMenu from '@/components/Share/DropdownMenu'
import pagination from '@/components/Pagination/index'
export default {
  name: 'management',
  components: { pagination },
  data() {
    return {
        dialogTitle: '新增',
        centerDialogVisible: false,
        currentPage: 1,
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }],
        params: {
          page: 1,
          limit: 10,
          total: 100
        },
        messageInfo: {

        },
        sexList: [
          {value: 1, label: '男'}, {value: 0, label: '女'}
        ],
        jobsList: [
          {value: 1, label: '前端'},{value: 2, label: '后端'},{value: 3, label: '测试'}
        ],
        typeList: [
          {value: 1, label: '试用期'},{value: 2, label: '正式员工'}
        ],
        permissions: [
          {value: 1, label: '管理员'},{value: 2, label: '员工'}
        ]
    }
  },
  methods: {
    search () {
      console.log(this.searchInfo)
    },
    handleitem (type, item) {
      if (type == 'edit') {
          console.log('==修改==',item)
          this.centerDialogVisible = true
          this.dialogTitle = '编辑员工信息'
      } else {
          console.log('==删除==',item)
          this.$confirm('确认删除员工信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      }
    },
    handleSizeChange (e) {
        this.params.page = e.page
        this.params.limit = e.limit
        console.log(this.params)
    },
    addNew () {
      this.centerDialogVisible = true
      this.dialogTitle = '新增员工信息'
    },
    // 确定添加  修改 员工信息
    agreeOption () {
      console.log('==修改==',this.messageInfo)
    }
  }
}
</script>

<style lang="scss" scoped>

.list_title{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editdialog{
  padding: 10px;
  text-align: left;
}
.sub-title{
  font-weight: 800;
  padding: 10px 0;
}

</style>
